<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>
不定高线框 absolute四个边脚实现
</title>
		<style type="text/css">
			.box {
			background:#F0F0F0 none repeat scroll 0 0;
			border:1px solid #CCCCCC;
			position:relative;
			}
			.box sup.r {
			background-position:-8px -112px;
			}
			.box .r {
			right:-1px;
			}
			.box sup {
			top:-1px;
			}
			.box sup, .box sub {
			background:transparent url(mix_nr.gif) no-repeat scroll 0 0;
			display:block;
			height:8px;
			overflow:hidden;
			position:absolute;
			width:8px;
			}
			.box sup.l {
			background-position:0 -112px;
			}
			.box .l {
			left:-1px;
			}
			.box_bd {
			padding:8px;
			}
			.box sub.r {
			background-position:-8px -120px;
			}
			.box .r {
			right:-1px;
			}
			.box sub {
			bottom:-1px;
			}
			.box sub.l {
			background-position:0 -120px;
			}
			.box .l {
			left:-1px;
			}
			p {margin:0;padding:0;padding:0;}
		</style>
	</head>
	<body>
		<div class="box">
					<sup class="r"></sup><sup class="l"></sup>
					<div class="box_bd">
						<p>图片圆角色块</p>
						<p>使用4个sup和sub作为边脚，通过background-image布置圆角</p>
						<p>但是在IE6下有父容器宽度或高度为奇数时的bug</p>
						<p>底部或右侧会多出1px</p>
					</div>
					<sub class="r"></sub><sub class="l"></sub>
				</div>
	</body>
</html>
